<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>龙芯-数据中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#E6F4F1',       // 主背景色：浅天蓝色
                        secondary: '#F5F7FA',     // 次要背景色：浅灰色
                        accent: '#B8D8D8',        // 强调色：中蓝色
                        neon: '#3B8CFF',          // 亮蓝色
                        'neon-blue': '#3B8CFF',   // 亮蓝色
                        'neon-purple': '#9C27B0', // 紫色（保持不变）
                        'text-blue': '#2A78A5',   // 文本蓝色
                        dark: '#4A6FA5',          // 深色文本
                        light: '#F8F9FA',         // 浅色背景
                    },
                    fontFamily: {
                        matrix: ['Courier New', 'monospace'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow-neon {
                text-shadow: 0 0 3px rgba(59, 140, 255, 0.5); /* 弱化发光效果 */
            }
            .border-glow {
                box-shadow: 0 0 5px rgba(59, 140, 255, 0.3); /* 弱化边框发光 */
            }
            .matrix-stream {
                background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 100%);
            }
            .glass-effect {
                backdrop-filter: blur(5px);
                background-color: rgba(230, 244, 241, 0.8); /* 调整为浅色玻璃效果 */
            }
            .bg-grid {
                background-image: 
                    linear-gradient(rgba(184, 216, 216, 0.1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(184, 216, 216, 0.1) 1px, transparent 1px);
                background-size: 20px 20px;
            }
        }
    </style>
</head>
<body class="bg-primary bg-grid text-dark overflow-hidden">
    <!-- 代码雨Canvas -->
    <canvas id="codeRain" class="fixed top-0 left-0 w-full h-full z-0"></canvas>
    
    <!-- 控制面板 -->
    <div class="fixed inset-0 z-10 flex flex-col">
        <!-- 顶部导航 -->
        <header class="glass-effect border-b border-accent p-4 flex justify-between items-center">
            <div class="text-neon text-2xl font-bold text-shadow-neon">
                <i class="fa fa-bolt mr-2"></i>龙芯-智能数据处理
            </div>
            <div class="flex space-x-4">
                <button class="px-4 py-2 border border-neon-blue/50 hover:border-neon-blue rounded transition-all text-neon-blue hover:bg-neon-blue/10">
                    <i class="fa fa-refresh mr-1"></i>刷新数据
                </button>
                <button class="px-4 py-2 border border-neon-purple/50 hover:border-neon-purple rounded transition-all text-neon-purple hover:bg-neon-purple/10">
                    <i class="fa fa-download mr-1"></i>导出数据
                </button>
            </div>
        </header>
        
        <!-- 主内容区 -->
        <main class="flex-1 flex p-4 gap-4">
            <!-- 左侧数据流面板 -->
            <div class="w-1/3 overflow-hidden rounded-lg border border-accent bg-secondary/50 matrix-stream">
                <div class="p-3 border-b border-accent text-neon-blue text-shadow-neon">
                    <i class="fa fa-code mr-2"></i>算法数据流
                </div>
                <div id="algorithmStream" class="p-4 h-[calc(100%-44px)] overflow-y-auto text-sm">
                    <!-- 代码流将在这里动态生成 -->
                </div>
            </div>
            
            <!-- 中间数据监控 -->
            <div class="flex-1 flex flex-col gap-4">
                <!-- 实时指标 -->
                <div class="rounded-lg border border-accent bg-white/80 glass-effect">
                    <div class="p-3 border-b border-accent text-neon-blue text-shadow-neon">
                        <i class="fa fa-line-chart mr-2"></i>实时指标
                    </div>
                    <div class="p-4 grid grid-cols-3 gap-4">
                        <div class="bg-primary/50 p-3 rounded border border-accent/20">
                            <div class="text-xs text-neon-blue/70 mb-1">AI训练进度</div>
                            <div class="text-2xl font-bold text-neon-blue text-shadow-neon">
                                <span id="trainingProgress">87.6</span>%
                            </div>
                            <div class="w-full h-2 bg-light mt-2 rounded-full overflow-hidden">
                                <div id="trainingProgressBar" class="h-full bg-neon-blue" style="width: 87.6%"></div>
                            </div>
                        </div>
                        <div class="bg-primary/50 p-3 rounded border border-accent/20">
                            <div class="text-xs text-neon-blue/70 mb-1">模型参数规模</div>
                            <div class="text-2xl font-bold text-neon-blue text-shadow-neon">
                                <span id="modelParams">175</span> <span class="text-sm">Billion</span>
                            </div>
                        </div>
                        <div class="bg-primary/50 p-3 rounded border border-accent/20">
                            <div class="text-xs text-neon-blue/70 mb-1">算力消耗</div>
                            <div class="text-2xl font-bold text-neon-blue text-shadow-neon">
                                <span id="computePower">42.8</span> <span class="text-sm">PFlops</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 数据流监控 -->
                <div class="flex-1 rounded-lg border border-neon-purple/30 bg-white/80 glass-effect">
                    <div class="p-3 border-b border-neon-purple/30 text-neon-purple text-shadow-neon">
                        <i class="fa fa-database mr-2"></i>数据流监控
                    </div>
                    <div class="p-4 h-[calc(100%-44px)]">
                        <canvas id="dataFlowChart" class="w-full h-full"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- 右侧信息面板 -->
            <div class="w-1/4 rounded-lg border border-accent bg-secondary/50 matrix-stream">
                <div class="p-3 border-b border-accent text-neon-blue text-shadow-neon">
                    <i class="fa fa-info-circle mr-2"></i>系统状态
                </div>
                <div class="p-4 space-y-4 h-[calc(100%-44px)] overflow-y-auto">
                    <div class="space-y-2">
                        <div class="flex justify-between items-center">
                            <span class="text-sm">GPU利用率</span>
                            <span class="text-neon-blue">98%</span>
                        </div>
                        <div class="w-full h-2 bg-light rounded-full overflow-hidden">
                            <div class="h-full bg-neon-blue" style="width: 98%"></div>
                        </div>
                    </div>
                    <div class="space-y-2">
                        <div class="flex justify-between items-center">
                            <span class="text-sm">内存占用</span>
                            <span class="text-neon-blue">87.5 GB / 96 GB</span>
                        </div>
                        <div class="w-full h-2 bg-light rounded-full overflow-hidden">
                            <div class="h-full bg-neon-blue" style="width: 91%"></div>
                        </div>
                    </div>
                    <div class="space-y-2">
                        <div class="flex justify-between items-center">
                            <span class="text-sm">网络吞吐量</span>
                            <span class="text-neon-blue">42.6 Gbps</span>
                        </div>
                        <div class="w-full h-2 bg-light rounded-full overflow-hidden">
                            <div class="h-full bg-neon-blue" style="width: 65%"></div>
                        </div>
                    </div>
                    <div class="space-y-2">
                        <div class="flex justify-between items-center">
                            <span class="text-sm">温度</span>
                            <span class="text-neon-blue">78°C</span>
                        </div>
                        <div class="w-full h-2 bg-light rounded-full overflow-hidden">
                            <div class="h-full bg-neon-blue" style="width: 78%"></div>
                        </div>
                    </div>
                    
                    <div class="mt-6 p-3 border border-accent rounded bg-primary/50">
                        <div class="text-neon-blue text-sm mb-2">活跃模型</div>
                        <ul class="text-xs space-y-1">
                            <li class="flex justify-between">
                                <span>GPT-4</span>
                                <span class="text-green-600">运行中</span>
                            </li>
                            <li class="flex justify-between">
                                <span>DALL-E 3</span>
                                <span class="text-green-600">运行中</span>
                            </li>
                            <li class="flex justify-between">
                                <span>Stable Diffusion</span>
                                <span class="text-yellow-600">训练中</span>
                            </li>
                            <li class="flex justify-between">
                                <span>Whisper</span>
                                <span class="text-green-600">运行中</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </main>
        
        <!-- 底部状态栏 -->
        <footer class="glass-effect border-t border-accent p-3 flex justify-between items-center text-xs">
            <div class="text-neon-blue/70">系统正常运行时间: <span id="uptime">42天17小时32分钟</span></div>
            <div class="text-neon-blue/70">最后更新: <span id="lastUpdate">刚刚</span></div>
        </footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        // 代码雨效果（调整为浅色主题）
        const codeRainCanvas = document.getElementById('codeRain');
        const codeRainCtx = codeRainCanvas.getContext('2d');
        
        // 设置Canvas尺寸
        function resizeCanvas() {
            codeRainCanvas.width = window.innerWidth;
            codeRainCanvas.height = window.innerHeight;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);
        
        // 字符集 - 更偏向于数学和编程符号
        const characters = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzλμβπσφε∇∞±÷×=≠<>≤≥∑∫∏√∀∃∈⊆⊂∪∩∅⇒⇔';
        const charArray = characters.split('');
        
        // 雨滴设置
        const drops = [];
        const fontSize = 14;
        const columns = codeRainCanvas.width / fontSize;
        
        // 初始化雨滴位置
        for (let x = 0; x < columns; x++) {
            drops[x] = Math.floor(Math.random() * codeRainCanvas.height);
        }
        
        // 绘制代码雨（浅色主题）
        function drawCodeRain() {
            // 半透明背景，创造拖尾效果
            codeRainCtx.fillStyle = 'rgba(230, 244, 241, 0.95)'; // 浅色背景
            codeRainCtx.fillRect(0, 0, codeRainCanvas.width, codeRainCanvas.height);
            
            codeRainCtx.fillStyle = '#3B8CFF'; // 浅蓝字符
            codeRainCtx.font = fontSize + 'px "Courier New", monospace';
            
            // 绘制每个雨滴
            for (let i = 0; i < drops.length; i++) {
                const text = charArray[Math.floor(Math.random() * charArray.length)];
                
                // 让第一滴更大更亮
                if (Math.random() > 0.95) {
                    codeRainCtx.fillStyle = '#2A78A5'; // 深蓝色
                    codeRainCtx.font = (fontSize + 2) + 'px "Courier New", monospace';
                } else {
                    codeRainCtx.fillStyle = 'rgba(59, 140, 255, ' + (Math.random() * 0.6 + 0.4) + ')'; // 半透明浅蓝
                    codeRainCtx.font = fontSize + 'px "Courier New", monospace';
                }
                
                codeRainCtx.fillText(text, i * fontSize, drops[i] * fontSize);
                
                // 随机重置雨滴位置
                if (drops[i] * fontSize > codeRainCanvas.height && Math.random() > 0.975) {
                    drops[i] = 0;
                } else {
                    drops[i]++;
                }
            }
            
            requestAnimationFrame(drawCodeRain);
        }
        drawCodeRain();
        
        // 算法数据流生成（保持不变）
        const algorithmStream = document.getElementById('algorithmStream');
        const codeTemplates = [
            'def train_model({0}):\n    {1} = tf.keras.Sequential([\n        tf.keras.layers.Dense({2}, activation=\'relu\'),\n        tf.keras.layers.Dropout({3}),\n        tf.keras.layers.Dense({4}, activation=\'{5}\')\n    ])\n    {1}.compile(optimizer=\'{6}\', loss=\'{7}\', metrics=[\'accuracy\'])\n    {1}.fit({8}, {9}, epochs={10}, batch_size={11})',
            'class {0}(nn.Module):\n    def __init__(self):\n        super({0}, self).__init__()\n        self.layer1 = nn.Linear({1}, {2})\n        self.layer2 = nn.Linear({2}, {3})\n        \n    def forward(self, x):\n        x = F.relu(self.layer1(x))\n        x = self.layer2(x)\n        return x\n\nmodel = {0}()\noptimizer = optim.Adam(model.parameters(), lr={4})',
            'const {0} = ({1}) => {{\n    const {2} = tf.sequential();\n    {2}.add(tf.layers.dense({{units: {3}, inputShape: [{4}]}}));\n    {2}.add(tf.layers.dense({{units: {5}, activation: \'{6}\'}}));\n    {2}.compile({{optimizer: \'{7}\', loss: \'{8}\'}});\n    return {2}.fit({9}, {10}, {{epochs: {11}}});\n}};',
            '@staticmethod\nasync def {0}({1}):\n    async with {2}Session() as session:\n        query = {3}Query({{\n            "{4}": {5},\n            "{6}": {7},\n            "max_length": {8},\n            "temperature": {9}\n        }})\n        response = await session.execute(query)\n        return response[\'{10}\']'
        ];
        
        const placeholders = [
            ['model_name', 'input_size', 'hidden_units', 'dropout_rate', 'output_size', 'activation', 'optimizer', 'loss_function', 'x_train', 'y_train', 'epochs', 'batch_size'],
            ['ModelClass', 'input_dim', 'hidden_dim', 'output_dim', 'learning_rate'],
            ['trainModel', 'input', 'model', 'hiddenUnits', 'inputShape', 'outputUnits', 'activation', 'optimizer', 'loss', 'xTrain', 'yTrain', 'epochs'],
            ['generate_text', 'prompt', 'client', 'GPT4', 'model', '\'gpt-4\'', 'prompt', 'prompt', '2000', '0.7', 'choices']
        ];
        
        const variables = [
            ['transformer_encoder', 'input_data', '512', '0.1', '10', 'softmax', 'adam', 'categorical_crossentropy', 'X_train', 'y_train', '10', '32'],
            ['LSTMClassifier', '784', '256', '10', '0.001'],
            ['trainModel', 'inputTensor', 'model', '128', '784', '10', 'softmax', 'adam', 'categoricalCrossentropy', 'xTrain', 'yTrain', '5'],
            ['generate_text', 'user_prompt', 'OpenAI', 'GPT4', 'model', '\'gpt-4\'', 'prompt', 'user_prompt', '2000', '0.7', 'choices']
        ];
        
        // 生成随机代码行（保持不变）
        function generateRandomCodeLine() {
            const templateIndex = Math.floor(Math.random() * codeTemplates.length);
            let code = codeTemplates[templateIndex];
            
            // 替换占位符
            placeholders[templateIndex].forEach((placeholder, index) => {
                const replacement = variables[templateIndex][index];
                code = code.replace(new RegExp(`\\{${index}\\}`, 'g'), replacement);
            });
            
            // 分割成多行
            const lines = code.split('\n');
            const highlightedLines = lines.map(line => {
                // 蓝色主题的语法高亮
                let highlighted = line
                    .replace(/(def|class|async|with|return|if|else|for|while|in|as|import|from)/g, '<span class="text-blue-600">$1</span>')
                    .replace(/(\'.*?\'|".*?")/g, '<span class="text-purple-600">$1</span>')
                    .replace(/(\d+\.\d+|\d+)/g, '<span class="text-neon-blue">$1</span>')
                    .replace(/(=>|\+|\-|\/|\*|=|==|!=|<=|>=|<|>)/g, '<span class="text-cyan-600">$1</span>')
                    .replace(/(self|this|super)/g, '<span class="text-teal-600">$1</span>');
                return `<span class="inline-block">${highlighted}</span>`;
            });
            
            return highlightedLines;
        }
        
        // 定时添加新代码
        function addNewCode() {
            const lines = generateRandomCodeLine();
            const fragment = document.createDocumentFragment();
            
            lines.forEach(line => {
                const div = document.createElement('div');
                div.className = 'opacity-0 transition-opacity duration-500';
                div.innerHTML = line;
                fragment.appendChild(div);
                
                // 淡入效果
                setTimeout(() => {
                    div.classList.remove('opacity-0');
                }, 10);
            });
            
            algorithmStream.appendChild(fragment);
            
            // 保持滚动到底部
            algorithmStream.scrollTop = algorithmStream.scrollHeight;
            
            // 移除旧的代码行
            if (algorithmStream.children.length > 100) {
                const count = algorithmStream.children.length - 100;
                for (let i = 0; i < count; i++) {
                    algorithmStream.removeChild(algorithmStream.firstChild);
                }
            }
        }
        
        // 每500ms添加新代码
        setInterval(addNewCode, 500);
        
        // 数据图表（保持不变）
        const ctx = document.getElementById('dataFlowChart').getContext('2d');
        const dataFlowChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: Array.from({length: 30}, (_, i) => i),
                datasets: [{
                    label: '处理速度',
                    data: Array.from({length: 30}, () => Math.floor(Math.random() * 100) + 50),
                    borderColor: '#3B8CFF',
                    backgroundColor: 'rgba(59, 140, 255, 0.1)',
                    tension: 0.4,
                    fill: true
                }, {
                    label: '数据吞吐量',
                    data: Array.from({length: 30}, () => Math.floor(Math.random() * 150) + 80),
                    borderColor: '#9C27B0',
                    backgroundColor: 'rgba(156, 39, 176, 0.1)',
                    tension: 0.4,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        grid: {
                            color: 'rgba(59, 140, 255, 0.05)'
                        },
                        ticks: {
                            color: 'rgba(59, 140, 255, 0.7)'
                        }
                    },
                    y: {
                        grid: {
                            color: 'rgba(59, 140, 255, 0.05)'
                        },
                        ticks: {
                            color: 'rgba(59, 140, 255, 0.7)'
                        }
                    }
                },
                plugins: {
                    legend: {
                        labels: {
                            color: 'rgba(59, 140, 255, 0.9)'
                        }
                    }
                },
                animation: {
                    duration: 0
                }
            }
        });
        
        // 实时更新数据
        function updateChart() {
            // 移除第一个数据点并添加新数据点
            dataFlowChart.data.datasets[0].data.shift();
            dataFlowChart.data.datasets[0].data.push(Math.floor(Math.random() * 100) + 50);
            
            dataFlowChart.data.datasets[1].data.shift();
            dataFlowChart.data.datasets[1].data.push(Math.floor(Math.random() * 150) + 80);
            
            dataFlowChart.update();
        }
        
        // 每2秒更新图表
        setInterval(updateChart, 2000);
        
        // 实时更新指标
        function updateMetrics() {
            const trainingProgress = document.getElementById('trainingProgress');
            const trainingProgressBar = document.getElementById('trainingProgressBar');
            const modelParams = document.getElementById('modelParams');
            const computePower = document.getElementById('computePower');
            const lastUpdate = document.getElementById('lastUpdate');
            
            // 更新训练进度
            let currentProgress = parseFloat(trainingProgress.textContent);
            currentProgress += Math.random() * 2;
            if (currentProgress > 100) currentProgress = 80;
            trainingProgress.textContent = currentProgress.toFixed(1);
            trainingProgressBar.style.width = `${currentProgress}%`;
            
            // 更新模型参数
            const newParams = parseInt(modelParams.textContent);
            const change = Math.floor(Math.random() * 10) - 5;
            modelParams.textContent = (newParams + change).toString();
            
            // 更新算力消耗
            const currentPower = parseFloat(computePower.textContent);
            const powerChange = (Math.random() * 2 - 1).toFixed(1);
            computePower.textContent = (parseFloat(currentPower) + parseFloat(powerChange)).toFixed(1);
            
            // 更新最后更新时间
            lastUpdate.textContent = new Date().toLocaleTimeString();
        }
        
        // 每3秒更新指标
        setInterval(updateMetrics, 3000);
    </script>
</body>
</html>